<template>
  <div id="app" class="container">
    <Category  title='美食' >
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" >
    </Category>
    <Category  title='电影' >
      <ul>
        <li v-for="(item,index) in films" :key="index">
          {{item}}
        </li>
      </ul>
    </Category>
    <Category  title='游戏' >
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue';
export default {
  components: { Category },
  name: "App",
   data(){
    return {
      foos:['火锅','炒菜','米饭'],
      films:['你好','世界','宇宙'],
      games:['坦克','飞机','大炮']  
    }
  },
};
</script>
<style>
.container{
  display:flex;
  justify-content:space-between;
}
img{
  width:100%;
}
video{
  width:100%;
}
</style>

